{% load myfilter %}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/cms/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/cms/advisory.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>大学生心理健康评估：后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h3>大学生心理健康评估：后台管理</h3>
        <div>
            <h3>Admin</h3>
            <el-button @click="logout" size="mini">退出</el-button>
        </div>
    </header>
    <main class="main">
        <el-menu default-active="3" class="sidebar" @select="navto">
            <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;页</span>
            </el-menu-item>
            <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">心理咨询</span>
            </el-menu-item>
        </el-menu>
        <section class="content">
            <el-button @click="show_add">添加医生</el-button>
            <el-table :data="tableData" stripe border>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="picture"
                        label="照片"
                        width="65">
                    <template slot-scope="scope">
                        <el-avatar shape="square" :src="scope.row.picture"></el-avatar>
                        <el-upload style="width: 40%"
                                   action=""
                                   :show-file-list="false"
                                   :data="{'action':'head','uid':scope.row.id}"
                                   :on-success="upload_head"
                                   :before-upload="beforeAvatarUpload">
                            <el-button type="text" style="font-size: 10px;">点击设置</el-button>
                        </el-upload>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="hospital"
                        label="所属医院">
                </el-table-column>
                <el-table-column
                        width="180"
                        label="科室/职位">
                    <template slot-scope="scope">
                        <el-tag size="small">[[ scope.row.office ]]</el-tag>
                        <el-tag size="small" type="danger">[[ scope.row.level ]]</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="serve"
                        label="服务人次"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="score"
                        label="评分"
                        width="150">
                    <template slot-scope="scope">
                        <el-rate v-model="scope.row.score" disabled></el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="intro"
                        label="简介">
                </el-table-column>
                <el-table-column
                        width="220"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="show_advisory_log(scope.row)" size="small" type="info" plain>查看</el-button>
                        <el-button @click="show_doctor(scope.row)" size="small" type="primary" plain>编辑</el-button>
                        <el-button @click="del(scope.row)" size="small" type="danger" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <transition name="el-fade-in-linear">
            <div v-show="form.show" class="form" @click.stop="form.show = false">
                <div class="box" @click.stop.prevent>
                    <h3>医生资料</h3>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="form.doctor.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属医院">
                            <el-input v-model="form.doctor.hospital"></el-input>
                        </el-form-item>
                        <el-form-item label="科室">
                            <el-input v-model="form.doctor.office"></el-input>
                        </el-form-item>
                        <el-form-item label="职位">
                            <el-input v-model="form.doctor.level"></el-input>
                        </el-form-item>
                        <el-form-item label="评分">
                            <el-rate v-model="form.doctor.score" style="margin-top: 12px;"></el-rate>
                        </el-form-item>
                        <el-form-item label="服务人数">
                            <el-input-number v-model="form.doctor.serve" :min="0" :max="999999"></el-input-number>
                        </el-form-item>
                        <el-form-item label="简介">
                            <el-input type="textarea" v-model="form.doctor.intro"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align: right">
                                <el-button type="primary" @click="alter">提交</el-button>
                                <el-button @click="form.show = false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-button class="close" icon="el-icon-close" circle size="mini"
                               @click.stop="form.show = false"></el-button>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear">
            <div v-show="add_form.show" class="form" @click.stop="add_form.show = false">
                <div class="box" @click.stop.prevent>
                    <h3>添加医生</h3>
                    <el-form ref="form" :model="add_form" label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="add_form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属医院">
                            <el-input v-model="add_form.hospital"></el-input>
                        </el-form-item>
                        <el-form-item label="科室">
                            <el-input v-model="add_form.office"></el-input>
                        </el-form-item>
                        <el-form-item label="职位">
                            <el-input v-model="add_form.level"></el-input>
                        </el-form-item>
                        <el-form-item label="评分">
                            <el-rate v-model="add_form.score" style="margin-top: 12px;"></el-rate>
                        </el-form-item>
                        <el-form-item label="服务人数">
                            <el-input-number v-model="add_form.serve" :min="0" :max="999999"></el-input-number>
                        </el-form-item>
                        <el-form-item label="简介">
                            <el-input type="textarea" v-model="add_form.intro"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="text-align: right">
                                <el-button type="primary" @click="add">提交</el-button>
                                <el-button @click="add_form.show = false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-button class="close" icon="el-icon-close" circle size="mini"
                               @click.stop="add_form.show = false"></el-button>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear">
            <div v-show="advisory_log.show" class="form" @click.stop="advisory_log.show = false">
                <div class="box" @click.stop.prevent style="width: 60%;">
                    <h3>咨询记录</h3>
                    <el-timeline class="advisory">
                        <el-timeline-item
                                v-for="(item, index) in advisory_log.log"
                                :key="index"
                                :timestamp="item.date">
                            <div>姓名：<span style="color: #999;font-size: 10px;">[[ item.name ]]</span></div>
                            <div style="color: #666;">内容：<p style="color: #999;font-size: 10px;margin: 10px;">[[
                                item.content ]]</p></div>
                            <div>电话：<span style="color: #999;font-size: 10px;">[[ item.tel ]]</span></div>
                        </el-timeline-item>
                    </el-timeline>
                    <el-button class="close" icon="el-icon-close" circle size="mini"
                               @click.stop="advisory_log.show = false"></el-button>
                </div>
            </div>
        </transition>
    </main>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            tableData: [],
            form: {
                show: false,
                doctor: {}
            },
            advisory_log: {
                show: false,
                log: []
            },
            add_form: {
                show: false,
                name: '',
                hospital: '',
                office: '',
                level: '',
                score: 0,
                serve: 0,
                intro: '',
                cover: ''
            }
        },
        mounted: function () {
            axios.post('').then(res => {
                this.tableData = res.data.doctor
                console.log(res.data)
            })
        },
        methods: {
            {#退出登录#}
            logout() {
                Cookies.remove('secret_key');
                window.location.href = '/cms'
            },
            {#删除医生#}
            del(doctor) {
                this.$confirm('此操作将永久删除该医生：“' + doctor.name + '”, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = new FormData()
                    params.append('action', 'del')
                    params.append('uid', doctor.id)
                    axios.post('', params).then(res => {
                        if (res.data.state) {
                            this.tableData = res.data.doctor
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            {#显示医生信息修改框#}
            show_doctor(doctor) {
                this.form.show = true
                this.form.doctor = JSON.parse(JSON.stringify(doctor))
            },
            {#显示添加医生输入框#}
            show_add() {
                this.add_form = {
                    show: true,
                    name: '',
                    hospital: '',
                    office: '',
                    level: '',
                    score: 0,
                    serve: 0,
                    intro: ''
                }
            },
            {#显示医生咨询记录#}
            show_advisory_log(doctor) {
                this.advisory_log.show = true
                this.advisory_log.log = doctor.task
            },
            {#修改医生信息#}
            alter() {
                if (this.form.doctor.name && this.form.doctor.office && this.form.doctor.level && this.form.doctor.hospital) {
                    let params = new FormData()
                    params.append('action', 'alter')
                    params.append('form', JSON.stringify(this.form.doctor))
                    axios.post('', params).then(res => {
                        if (res.data.state) {
                            this.tableData = res.data.doctor
                            this.form.show = false
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '修改失败!'
                            });
                        }
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请填写完整!'
                    });
                }
            },
            {#上传头像结果#}
            upload_head(res) {
                this.tableData = res.doctor
            },
            {#判断上传文件类型#}
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            {#添加医生#}
            add() {
                if (this.add_form.name && this.add_form.office && this.add_form.level && this.add_form.hospital) {
                    let params = new FormData()
                    params.append('action', 'add')
                    params.append('form', JSON.stringify(this.add_form))
                    axios.post('', params).then(res => {
                        if (res.data.state) {
                            this.tableData = res.data.doctor
                            this.add_form.show = false
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败!'
                            });
                        }
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请填写完整!'
                    });
                }
            },
            {#跳转界面#}
            navto(index) {
                switch (index) {
                    case '1':
                        window.location.href = '/cms/index';
                        break;
                    case '2':
                        window.location.href = '/cms/user';
                        break;
                    case '3':
                        window.location.href = '/cms/advisory';
                        break;
                    default:
                        break
                }
            }
        }
    });
</script>
</body>
</html>
